$classNamePrefix: weapp-login-component;


.#{$classNamePrefix}-root {
  position: relative;
  height: 100vh;
  width: 100vw;
  .#{$classNamePrefix}-header {
    position: relative;

    .#{$classNamePrefix}-background {
      width: 750px;
      height: 586px;
    }

    .#{$classNamePrefix}-info {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      flex-direction: column;
      align-items: center;

      .#{$classNamePrefix}-login-icon {
        border-radius: 50%;
        $zoomRate: 0.8;
        width: 224px * $zoomRate;
        height: 224px * $zoomRate;
      }

      .#{$classNamePrefix}-system-name {
        margin-top: 23px;
        color: #fff;
        font-size: 36px;
      }
    }
  }

  .#{$classNamePrefix}-body {
    .#{$classNamePrefix}-form {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;

      .#{$classNamePrefix}-input-item{
        margin-bottom: 72px;
        .#{$classNamePrefix}-school-search-input{
          position: relative;
          .#{$classNamePrefix}-school-list{
            position: absolute;
            max-height: 324px;
            width: 100%;
            top: 100%;
            left: 0;
            background-color: #fff;
            overflow-y: scroll;
            z-index: 10;
            box-sizing: border-box;
            box-shadow: 0 0 18rpx rgba(0, 0, 0, 0.18);
            .#{$classNamePrefix}-school-list-item{
              display: flex;
              height: 80px;
              border-bottom: 1px solid #f2f2f2;
              color: #333333;
              align-items: center;
              padding-left: 40px;
              flex: 1;
            }
          }
        }
      }

      .#{$classNamePrefix}-private{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        padding-left: 10px;
        margin-bottom: 24px;

        .lg_check_box_warp{
          line-height: 24px;
        }
        .lg_check_box_cho, .lg_check_box_half{
          width: 30px;
          margin-right: 8px;
        }
        .lg_check_box{
          height: 24px;
          width: 24px;
        }
        .lg_check_box_cho:before, .lg_check_box_half:before{
          font-size: 24px;
          line-height: 30px;
        }

        .#{$classNamePrefix}-private-text{
          display: flex;
          align-items: center;
          font-size: 22px;
          color: #666666;

          .#{$classNamePrefix}-private-text-point{
            color: #0099ff;
            margin:0 5px;
          }
        }
      }

      .#{$classNamePrefix}-btn-area {

        .#{$classNamePrefix}-login-btn {
          width: 574px;
          height: 80px;
          font-size: 36px;
          line-height: 1;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }

       .#{$classNamePrefix}-hand-area{
          margin-top: 10px;
          width: 554px;
          display: flex;
          justify-content: space-between;

          .#{$classNamePrefix}-hand-area-item{
             color: rgb(0,153,255);
             font-size: 26px;

             &:active{
                opacity: 0.8;
             }
          }
       }
    }
  }

  .#{$classNamePrefix}-footer{
    position: absolute;
    bottom: 91px;
    left: 50%;
    transform: translateX(-50%);
    .#{$classNamePrefix}-register-tips{
      font-size: 26px;
      color: #999;
      line-height: 1;
      display: flex;
      .#{$classNamePrefix}-register-btn{
        color: #09f;
        text-decoration: underline;
      }
    }
  }
}
